<template>
  <demoBlock title="多选" class="demo-calendar">
    <vcu-cell title="选择多个日期" :value="date" @click="singleShow = true" />
    <vcu-calendar
      type="multiple"
      v-model:visible="singleShow"
      @confirm="onConfirmSingle"
    />
  </demoBlock>
</template>
<script>
import dayjs from "dayjs";
import { ref } from "vue";
export default {
  setup() {
    const date = ref("");
    const singleShow = ref(false);
    const onConfirmSingle = (value) => {
      const _val = value.map((item) => dayjs(item).format("YYYY-MM-DD"));
      date.value = _val.join(",");
    };

    return {
      date,
      singleShow,
      onConfirmSingle,
    };
  },
};
</script>
